
<template>
  <div class="inventory-container">
    <!-- 面包屑 -->
    <div style="width: auto;height: 60px;font-size: larger;">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">仪表台</el-breadcrumb-item>
    <el-breadcrumb-item>库存查询</el-breadcrumb-item>
  </el-breadcrumb>
    </div>
    <!-- 汇总 -->
    <div style="height: 200px;width: auto;" :model="num">
        <!-- 当前库存和金额 -->
        <div style="height: 150px;width: 350px;border: solid;color:darkgray;margin-right: 40px;float: left;">
            <table>
                <tr style="height: 70px;color: black;font-size: large">
                    <th>&ensp; &ensp;&ensp;&ensp; {{ num.sumNum }}</th>
                    <th>&ensp; &ensp; &ensp;&ensp; &ensp;{{ num.sumMoney }}</th>
                </tr>
                 <tr style="height: 70px;color: chocolate;font-size: large">
                    <th>&ensp; &ensp;&ensp;&ensp; 当前库存数量</th>
                    <th>&ensp; &ensp; &ensp;&ensp;&ensp; 当前库存金额</th>
                </tr>
            </table>
        </div>
        <!-- 入库出库 -->
         <div style="height: 150px;width: 350px;border: solid;color:darkgray;margin-right: 40px;float: left;">
            <table>
                <tr style="height: 70px;color: black;font-size: large">
                    <th>&ensp; &ensp;&ensp;&ensp;&ensp; {{ num.sumInNum }}</th>
                    <th>&ensp; &ensp; &ensp;&ensp;&ensp;&ensp; {{ num.sumOutNum }}</th>
                </tr>
                 <tr style="height: 70px;color: chocolate;font-size: large">
                    <th>&ensp; &ensp;&ensp;&ensp;&ensp;&ensp; 入库数量</th>
                    <th>&ensp; &ensp; &ensp; &ensp;&ensp;&ensp;&ensp;出库数量</th>
                </tr>
            </table>
        </div>
        <!-- 待入库待出库 -->
         <div style="height: 150px;width: 350px;border: solid;color:darkgray;float: left;">
             <table>
                <tr style="height: 70px;color: black;font-size: large">
                    <th>&ensp; &ensp;&ensp;&ensp;&ensp;&ensp; {{ num.waitSumInNum }}</th>
                    <th>&ensp; &ensp; &ensp;&ensp;&ensp;&ensp;&ensp; {{ num.waitSumOutNum }}</th>
                </tr>
                 <tr style="height: 70px;color: chocolate;font-size:large">
                    <th>&ensp; &ensp; &ensp;&ensp;&ensp;货品待入库</th>
                    <th>&ensp; &ensp; &ensp;&ensp; &ensp;&ensp;&ensp;货品待出库</th>
                </tr>
            </table>
        </div>
    </div>
    <!-- 查询、表格和分页容器 -->
    <div class="data-container">
      <!-- 查询 -->
      <div class="search-section">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="商品名称:">
            <el-input v-model="formInline.Goodsname" placeholder="商品名称" clearable />
          </el-form-item>
          <el-form-item label="类型名称:">
            <el-input v-model="formInline.WGoodstypename" placeholder="类型名称" clearable />
          </el-form-item>
          <el-form-item label="单位:">
            <el-input v-model="formInline.UnitName" placeholder="单位" clearable />
          </el-form-item>
          <el-form-item label="仓库名称:">
            <el-input v-model="formInline.Warename" placeholder="仓库名称" clearable />
          </el-form-item>
          <el-form-item label="条码:">
            <el-input v-model="formInline.Goodsbarcodes" placeholder="条码" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button type="primary" @click="Reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 表格 -->
      <div class="table-section">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed type="index" label="行号" width="80" />
          <el-table-column fixed prop="goodscoding" label="货品编码" width="180" >
            <template v-slot="scopt">
              <el-button link type="primary" size="small" @click="GetGoods(scopt.row)">
                {{scopt.row.goodscoding  }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column fixed prop="goodsname" label="货品名称" width="120" />
          <el-table-column prop="goodsstatus" label="货品状态" width="120" >
            <template v-slot="scopt">
              <el-tag v-if="scopt.row.goodsstatus==1">
               未入库
              </el-tag>
              <el-tag v-if="scopt.row.goodsstatus==2">
               已入库
              </el-tag>
              <el-tag v-if="scopt.row.goodsstatus==3">
               已出库
              </el-tag>
              
            </template>
          </el-table-column>
          <el-table-column prop="wGoodstypename" label="类型名称" width="120" />
          <el-table-column prop="goodsspecifications" label="规格型号" width="120" />
          <el-table-column prop="unitName" label="单位" width="120" />
          <el-table-column prop="goodsbarcodes" label="条码" width="120" />
          <el-table-column prop="num" label="库存" width="120" />
          <el-table-column prop="inventoryprice" label="库存总金额" width="120" />
          <el-table-column prop="warename" label="仓库名称" width="120" />
          <el-table-column prop="locationName" label="库位名称" width="120" />
          <el-table-column fixed="right" label="操作" min-width="200">
              
            <template v-slot="scopt">
                <el-button link type="primary" size="small" @click="InOut_Show(scopt.row.goodscoding)">出入库流水</el-button>
              <el-button link type="primary" size="small" @click="Inventory_Show(scopt.row.goodscoding)">库存分布</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
    <table>
            <tr>
                <th>
                    <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" layout="slot, sizes" :total="formInline.count">
                        当前第{{ formInline.PageIndex }}页/共{{ formInline.pcount}}页/共{{
                            formInline.count 
                        }}条
                    </el-pagination>
                </th>
                <th>
                    <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" layout="slot, prev, pager, next" :total="formInline.count">
                        <el-button :disabled="formInline.PageIndex == 1" @click="formInline.PageIndex = 1"
                            type="primary">首页</el-button>
                    </el-pagination>
                </th>
                <th>
                    <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" layout="slot,jumper" :total="formInline.count">
                        <el-button :disabled="formInline.PageIndex == formInline.pcount" @click="formInline.PageIndex = formInline.PageSize"
                            type="primary">尾页</el-button>
                    </el-pagination>
                </th>
            </tr>
        </table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { watch, type RefSymbol } from '@vue/reactivity'
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { useRoute,useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
const route=useRoute();
const router=useRouter();
onMounted(()=>{
  show();
})
const formInline = reactive({
  PageIndex:1,
  PageSize:10,
  Goodsname:"",
  WGoodstypename:"",
  UnitName:"",
  Warename:"",
  Goodsbarcodes:"",
  count:0,
  pcount:0,
  goodscoding:""
})
const num=reactive({
  sumNum: 0,
  sumMoney: 0,
  sumInNum: 0,
  sumOutNum: 0,
  waitSumInNum: 0,
  waitSumOutNum: 0
})
const tableData=ref([])

const show =()=> {
  service.get("/api/app/standing__Book/inventory",
  {params:{PageIndex:formInline.PageIndex,
    PageSize:formInline.PageSize,
    Goodsname:formInline.Goodsname,
    WGoodstypename:formInline.WGoodstypename,
    UnitName:formInline.UnitName,
    Warename:formInline.Warename,
    Goodsbarcodes:formInline.Goodsbarcodes}}).then(res=>{
      tableData.value=res.data.pageDatas
      formInline.count=res.data.totalData
      formInline.pcount=res.data.totalPage
       num.sumNum=res.data.pageDatas[0].sumNum
      num.sumMoney=res.data.pageDatas[0].sumMoney
      num.sumInNum=res.data.pageDatas[0].sumInNum
      num.sumOutNum=res.data.pageDatas[0].sumOutNum
      num.waitSumInNum=res.data.pageDatas[0].waitSumInNum
      num.waitSumOutNum=res.data.pageDatas[0].waitSumOutNum
    })
  }
const onSubmit = () => {
  formInline.PageIndex=1;
  show()
}
  watch(num,()=>{
    show()
  })

// 查询
import { reactive } from 'vue'

const Reset=()=>{
  formInline.Goodsname="",
  formInline.WGoodstypename="",
  formInline.UnitName="",
  formInline.Warename="",
  formInline.Goodsbarcodes="",
  show()
}
//出入库流水
const InOut_Show=(id:any)=>{
  console.log('跳转到出入库流水，货品编码:', id)
  if (!id) {
    ElMessage.error('货品编码不能为空')
    return
  }
  router.push({path:"/InOut",query:{id:id}})
}
//库存分布
const Inventory_Show=(id:any)=>{
router.push({path:"/GetInventory_Distribution",query:{id :id}})
}
//获取货品详细信息
const GetGoods=(row:any)=>{
  router.push({path:"/GetGoods_Details",query:{id:row.goodscoding}})
}
//分页
import type { ComponentSize } from 'element-plus'
import service from '@/utils/request';



const handleSizeChange = (val: number) => {
  formInline.PageSize = val;
  formInline.PageIndex = 1;
  show();
}
const handleCurrentChange = (val: number) => {
  formInline.PageIndex = val;
  show();
}
watch(formInline,()=>{
  formInline.PageIndex=1;
  show();
})
</script>

<style>
.inventory-container {
  min-height: 100vh;

  background: linear-gradient(135deg, #e3f0ff 0%, #f8fbff 100%);
  padding: 20px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

/* 优化汇总卡片样式 */
.inventory-container > div:nth-child(2) > div {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #e3f0ff 0%, #f8fbff 100%);
  border: none !important;
  margin-bottom: 20px;
}

/* 数据容器样式 */
.data-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

/* 查询区域样式 */
.search-section {
  padding: 20px;
  border-bottom: 1px solid #f0f2f5;
  background: #fafbfc;
}

.search-section .demo-form-inline {
  margin: 0;
}

/* 表格区域样式 */
.table-section {
  padding: 0;
}

.table-section .el-table {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 分页区域样式 */
.pagination-section {
  padding: 15px 20px;
  background: #fafbfc;
  border-top: 1px solid #f0f2f5;
  display: flex;
  justify-content: center;
}

.pagination-section .el-pagination {
  margin: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
</style>